<template>
  <div>
    <hu-card :pb='0' v-show="MixinSelectShow">
      <el-form :model="searchData" ref="queryForm" class="mt10" label-width="110px" >
        <el-row :gutter="50">
          <el-col :span="6">
            <el-form-item label="标题" prop="title">
              <el-input v-model="searchData.title" placeholder="请输入" style="width: 100%"   />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公告类型" prop="type">
              <el-select  multiple collapse-tags   style="width: 100%" v-model="searchData.types" placeholder="请选择公告类型">
                <el-option v-for="dict in dict.type['notice-type']" :key="dict.value" :value="dict.value" :label="dict.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公告等级" prop="grade">
              <el-select style="width: 100%"  multiple  collapse-tags  v-model="searchData.grades" placeholder="请选择公告等级">
                <el-option v-for="(dict, index) in dict.type['notice-grade']" :key="dict.value" :value="dict.value" :label="dict.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="0" style="float: right">
              <el-button type="primary" icon="el-icon-search"  @click="searchList" style="font-size: 14px;">搜索</el-button>
              <el-button icon="el-icon-refresh"  @click="resetList" style="font-size: 14px;margin-left:10px">重置</el-button><cut-is-show :CutisShow.sync="MixinShowSearch"></cut-is-show>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="50" v-show="MixinShowSearch">
          <el-col :span="6">
            <el-form-item label="发布日期" prop="type">
              <el-date-picker type="daterange" style="width: 100%" @change="getPicker" v-model="pickerValue" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </hu-card>
    <hu-card>
      <div class="bottomlist" v-loading="loading">
        <div v-for="(item, index) in messagelist" :key="index" class="bottomlisthave oddeven" style="padding: 20px 15px" @click="gopage(item)">
          <span class="bottomlisthave">
            <el-image v-if="item.headFile.path" fit="cover" style="width: 150px; height: 80px; border-radius: 5%" :src="$config.imgUrl + item.headFile.path"></el-image>
            <template v-else>
              <div class="images_s">
                <img src="@/assets/images/mrgg.png" alt="" />
              </div>
            </template>
            <span style="margin-left: 10px;">
              <p class="html_content">
                <span style="margin-bottom: 20px; color: #000000">
                  {{ item.title }}
                </span>
              </p>
              <p>
                <span style="color: #aeaeae; padding-left: 0px">发布单位：{{ item.createCompanyName }}</span>
                <span style="color: #aeaeae; padding-left: 30px">发布人：{{ item.createByName }}</span>
                <span style="padding-left: 30px; color: #aeaeae">已读人数：{{ item.lookCount }}</span>

                <img style="margin-left: 10px" src="@/assets/images/newHi.svg" alt="" v-if="index == 0&&searchData.pageNum==1" />
              </p>
            </span>
          </span>
          <div style="
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: flex-end;
              min-height: 85px;
            ">
            <div style="color: #aeaeae">
              <span style="color: #aeaeae">重要等级：{{ item.gradeName }}</span>
              &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
              <span style="margin-left: 50px; color: #aeaeae; font-size: 14px"><img style="margin-right: 7px; margin-top: -2px" src="@/assets/images/time.svg" alt="" />
                {{ item.createDate }}</span>
            </div>
            <span>
              <span style="color: #5a8bff; padding-left: 30px">查看详情</span>
            </span>
          </div>
        </div>
        <div v-if="messagelist.length == 0" class="zwgg">
          <div class="img">
            <span>暂无公告</span>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <pagination v-show="total > 0" :total="total" :page.sync="searchData.pageNum" :limit.sync="searchData.pageSize" @pagination="searchList" />
    </hu-card>
    <hu-modal title="公告详情" :show-modal.sync="getModal" :loading="MixinLoading" :submit="false">
      <!-- slot="footer" -->
      <div style="color: #565656">
        <div style="
            font-size: 30px;
            font-weight: bold;
            line-height: 60px;
            text-align: center;
          ">
          {{ itemData.title }}
        </div>
        <div style="text-align: center; width: 100%; border-bottom: 1px solid #ddd">
          <p>
            <span style="padding-left: 0px; color: #aeaeae">重要等级：{{ itemData.gradeName }}</span>
            <span style="color: #aeaeae; padding-left: 30px">发布单位：{{ itemData.createCompanyName }}</span>
            <span style="color: #aeaeae; padding-left: 30px">发布人：{{ itemData.createByName }}</span>
            <span style="padding-left: 30px; color: #aeaeae">发布时间：{{ itemData.createDate }}</span>
            <span style="padding-left: 30px; color: #aeaeae">已读人数：{{ itemData.lookCount }}</span>
          </p>
        </div>
        <div>
          <el-form :model="searchData" ref="queryForm" class="mt10" :inline="true" label-width="110px" >
            <el-form-item label="附件下载" prop="grade">
              <template v-if="itemData.attachFiles">
                <span v-for="(item, index) in itemData.attachFiles" :key="index" style="display: flex; align-items: center">
                  <el-button @click="checkFile1(item)" type="text">{{
                    item.originalName
                  }}</el-button>
                  <i @click="downloadFile(item.previewPath)" class="el-icon-download i_icon" style="cursor: pointer; color: #496dff; font-size: 18px"></i>
                </span>
              </template>
            </el-form-item>
          </el-form>
        </div>
        <div style="display: flex; align-items: center;">
          <div style="margin: 0 10px">{{ itemData.createTime }}</div>
          <div>{{ itemData.createUserName }}</div>
        </div>
        <div style="width: 100%;padding: 0 90px ">
          <div class="ql-editor" style="word-wrap: break-word; word-break: normal" v-html="itemData.content"></div>
        </div>
      </div>
    </hu-modal>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "NoticeNoticecenter",
  dicts: ["notice-type", "notice-grade"],
  data() {
    return {
      value1: "",
      searchData: {},
      grades: [],
      types: [],
      message: null,
      messagelist: [],
      total: 0,
      getModal: false,
      itemData: {},
      pickerValue: undefined, // 时间
      loading: false,
    };
  },
  computed: {},
  mounted() {
    let data = this.$route.query;
    if (data.id) {
      this.gopage(data);
    }
    this.searchList();
  },
  methods: {
    resetList() {
      this.searchData = {};
      (this.grades = []), (this.types = []), (this.pickerValue = undefined);
    },
    // 搜索时间
    getPicker(arrDate) {
      this.searchData.beginTime = arrDate ? arrDate[0] : undefined;
      this.searchData.endTime = arrDate ? arrDate[1] : undefined;
    },
    cleartime() {},
    gopage(item) {
      request({
        url: "/base/notice/insertLookRecords",
        method: "post",
        params: {
          noiceId: item.id,
        },
      }).then((res) => {
        this.searchList();
      });
      this.itemData = item;
      this.getModal = true;
    },
    checkFile1(item) {
      this.$download.preview(item.previewPath, item.originalName);
    },
    downloadFile(url) {
      this.$download.download(url);
    },
    //查询
    searchList(page) {
      if (page) {
        this.searchData.pageNum = page.page;
        this.searchData.pageSize = page.limit;
      }
      let params = {
        ...this.searchData,
        types: this.searchData.types.join(","),
        grades: this.searchData.grades.join(","),
      };
      this.loading = true;
      request({
        url: "/base/notice/normalList",
        method: "get",
        params: params,
      }).then((res) => {
        this.loading = false;
        if (res.stateCode === 200) {
          this.messagelist = res.result.records;
          this.total = res.result.total;
          this.$forceUpdate();
        } else {
          this.$Message["warning"]({
            background: true,
            content: res.message,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bottomlist {
  .bottomlisthave {
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.oddeven:nth-child(odd) {
  background: #ffffff;
}
.oddeven:nth-child(even) {
  background: #f9fbff;
}
.oddeven {
  transition: 0.3s;
  &:hover {
    background-color: #e8eef8;
  }
}
.zwgg {
  width: 100%;
  height: 500px;
  margin: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .img {
    width: 230px;
    height: 230px;
    background: url("../../assets/images/zwgg.png") no-repeat;
    background-size: 100%;
    span {
      display: block;
      width: 80px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #999;
      margin: 0 auto;
      margin-top: 180px;
    }
  }
}
.images_s {
  width: 150px;
  height: 80px;
  // border-radius: 50%;
}
.images_s img {
  width: 100%;
  height: 100%;
  border-radius: 5%;
}
.html_content {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
}
.box-card[data-v-6e93a3a0] .el-form--inline .el-form-item {
  margin-bottom: 17px !important;
}
</style>
